<template>
  <el-dialog
    destroy-on-close
    title="添加"
    :visible.sync="isOpen"
    width="700px"
    append-to-body
    :close-on-click-modal="false"
    @close="cancel"
  >
    <div class="dialog">
      <el-form label-position="right" :model="form" ref="formRef" label-width="80px" :rules="rules">
        <el-form-item label="卡类型" prop="identityType">
          <el-select v-model="form.identityType" placeholder="请选择类型">
            <el-option label="IC卡" :value="3"/>
          </el-select>
        </el-form-item>
        <el-form-item label="卡号" prop="identityData">
          <el-input v-model="form.identityData" placeholder="请输入卡号"/>
        </el-form-item>
        <el-form-item label="生效时间" prop="effectivedate">
          <el-date-picker v-model="form.effectivedate" type="datetimerange"
            range-separator="-"
            start-placeholder="开始日期" end-placeholder="结束日期"/>
        </el-form-item>
        <el-form-item label="描述" prop="details">
          <el-input v-model="form.details" placeholder="请输入描述" type="textarea"/>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm(formRef)" :loading="btnLoading"
        >确 定
        </el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
// import {getPersonListApi} from "@/api/personnel";

export default {
  name: 'addIcCard',
  props: {
    personId: {
      type: String,
      default: [],
    },
  },
  data() {
    return {
      ruleList: [],
      btnLoading: false,
      form: {
        personId: this.personId,
        identityData: "",
        details: "",
        effectivedate: "",
        identificationTimes: 0,
        identitySubType: 1,
        identityType: 3,
        personIDType: 0,
        reserve: "",
      },
      rules: {
        identityType: [{required: true, message: "IC卡类型不能为空", trigger: "blur"}],
        effectivedate: [{required: true, message: "生效时间不能为空", trigger: "blur"}],
        identityData: [{required: true, message: "卡号不能为空", trigger: "blur"},
          {min: 2, max: 64, message: "卡号长度必须介于 2 和 64 之间", trigger: "blur",},],
      },
      isOpen: false,
      formRef: "",
    }
  },
  methods: {
    open() {
      this.form.identityType = 3;
      this.form.identityData = "";
      this.form.details = "";
      this.isOpen = true;
      this.btnLoading = false;
    },
    cancel() {
      this.isOpen = false;
    },
    submitForm() {
      this.$refs.formRef.validate((validate, fields) => {
        if (validate) {
          // console.log(this.form);
          this.form.identityType = Number(this.form.identityType)
          this.form.effectiveStartTime = this.$moment(this.form.effectivedate[0]).unix().toString();
          this.form.validEndTime = this.$moment(this.form.effectivedate[1]).unix().toString();
          // delete this.form.effectivedate;
          this.$emit("submitAddIcCard", this.form);
          console.log(123, this.form);
        } else {
          console.log("error submit!", fields);
        }
      });
    },
  }
}


</script>

<style lang="scss" scoped>
.dialog {
  padding: 20px 80px;
}
</style>
